import React from 'react';

// echart
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legendScroll';


// image
import echartWeixin from '@assets/images/detail-weixin.png';
import echartWeibo from '@assets/images/detail-weibo.png';
import echartTencent from '@assets/images/detail-tencent.png';
import echartIqiyi from '@assets/images/detail-iqiyi.png';
import './scss/echartarea.scss';


export default class EchartFourLine extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.legendType = [
      { name: '微信', icon: `image://${echartWeixin}`, textStyle: { color: '#fff' } },
      { name: '微博', icon: `image://${echartWeibo}`, textStyle: { color: '#fff' } },
      { name: '腾讯', icon: `image://${echartTencent}`, textStyle: { color: '#fff' } },
      { name: '爱奇艺', icon: `image://${echartIqiyi}`, textStyle: { color: '#fff' } }
    ];
  }

  componentDidMount() {
    // x 轴数据
    let xAxisData = this.props.xAxisData;
    // y 轴数据
    let echartData = this.props.yAxisData;
    this.fourLineEchart(echartData, xAxisData);
  }

  fourLineEchart(echartData, xAxisData) {
    let self = this;
    let historyEchart = echarts.init(this.refs.echartTypePie);
    let option = {
        color: ['#a610c9', '#fa8c41', '#4280fe', '#61af9e'],
        tooltip: { trigger: 'axis',backgroundColor: '#3d83fe', padding: [5, 10]},
        legend: { left: 'center', itemWidth: 14, itemHeight: 14, data: self.legendType, selectedMode: false},
        axisPointer: { lineStyle: { color: '#212E5D' } },
        grid: { left: '5%', right: '5%', bottom: '3%', containLabel: true },
        xAxis: {
          type: 'category', boundaryGap: false,
          data: xAxisData,
          axisLabel: { textStyle: { color: '#7484cb' } },
          axisLine: { lineStyle: {color: '#212e5d'} },
        },
        yAxis: {
          type: 'value',
          axisLine: { show: false },
          axisLabel: { textStyle: { color: '#7484cb' } },
          splitLine: { lineStyle: { color: '#212e5d' } }
        },
        series: echartData
    };
    historyEchart.setOption(option, true);
  }

  render() {
    return (
      <div className="echart-type-area" ref="echartTypePie"> </div>
    )
  }
}